<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />  
<meta http-equiv="Pragma" content="no-cache" />  
<meta http-equiv="Expires" content="0" /> 
	<meta charset="utf-8"> 
	<title>滑动日期控件</title>
 	<link rel="stylesheet" href="../components/bootstrap/dist/css/bootstrap.min.css">  
    <link rel="stylesheet" href="../components/bootstrapValidator/css/bootstrapValidator.css" type="text/css" />
	<script type="text/javascript" src="../components/jquery2.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="../components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../components/bootstrapValidator/js/bootstrapValidator.js"></script>
    <link href="../components/mobisscroll/css/mobiscroll.custom-3.0.0-beta2.min.css" rel="stylesheet" type="text/css" />
    <script src="../components/mobisscroll/js/mobiscroll.custom-3.0.0-beta2.min.js" type="text/javascript"></script>
</head>
<script type="text/javascript">


   $(document).ready(function(){
	   

	   var now = new Date();
	   var currYear = now.getFullYear();	
	   //选择日期
       $('#appDate').mobiscroll().date({
           theme: 'ios',
           lang: 'zh',
           display: 'bottom',
           mode: 'datetimeDate',
           min: new Date(now.getFullYear(), now.getMonth(), now.getDate()),
           startYear: currYear,
           dateFormat:'yyyy-mm-dd'

       });


	   //选择日期时间
       $('#appDateTime').mobiscroll().datetime({
           theme: 'ios',
           lang: 'zh',
           display: 'bottom',
           mode: 'datetimeInvalid',
           min: new Date(now.getFullYear(), now.getMonth(), now.getDate()),
           invalid: ['w0', 'w6', '5/1', '12/24', '12/25'],
           dateOrder: 'Mddyy',
           timeWheels: 'HHii',
           startYear: currYear,
           dateFormat:'yyyy-mm-dd'

       });


	   //选择时间
       $('#appTime').mobiscroll().time({
           theme: 'ios',
           lang: 'zh',
           display: 'bottom',
           mode: 'datetimeTime',
           headerText: false,
           maxWidth: 90
       });
       
       
   });


</script>

<body>


	<div  style="padding: 10px 10px 0px 10px"
	                 data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
	                 data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
	                 data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">
	
	    
		<div class="form-group has-feedback">
	      <input type="text" name="appDate" id="appDate" placeholder="选择日期" readonly class="form-control" style="padding: 6px 40px">
		  <span class="glyphicon glyphicon-time form-control-feedback" style="left:0;"></span>
		</div>
		
		<div class="form-group has-feedback">
	      <input type="text" name="appDateTime" id="appDateTime" placeholder="选择日期时间" readonly class="form-control" style="padding: 6px 40px">
		  <span class="glyphicon glyphicon-time form-control-feedback" style="left:0;"></span>
		</div>
		
		<div class="form-group has-feedback">
	      <input type="text" name="appTime" id="appTime" placeholder="选择时间" readonly class="form-control" style="padding: 6px 40px">
		  <span class="glyphicon glyphicon-time form-control-feedback" style="left:0;"></span>
		</div>
	            
	            	
		
	</div>
	
</body>
</html>